﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />

		<link rel="stylesheet" type="text/css" href="css/swiper.3.1.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/skin.css" />
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/queryloader2.min.js"></script>
		<script src="js/swiper.3.1.2.jquery.min.js"></script>
		<script src="js/swiper.animate1.0.2.min.js"></script>
		<script>
			$.fn.fly = function(settings) {
				var runs = settings.runs;
				var base = settings.base;
				var index = 1;
				var timer = settings.timer || 200;
				var that = this;
				setInterval(function() {
					var c = runs[index];
					$(that).attr("class", base + " " + c);
					index++;
					if (index == runs.length) index = 0;
				}, timer);
			};

		
			
		</script>
		<style>
		body{position:relative;}
		</style>
	</head>

	<body>
		<div class="index_body">
			<div class="bg"></div>
			<div class="index_content">
				<div class="rule">
					<a href="javascript:void(0)" id="r_button">奖品&活动规则>></a>
				</div>
				<div class="swiper-container swiper2">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="title">
								<img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" src="img/title.png" />

								<div class="butter1">
									<div class="butterfly1">
										<img src="img/butterfly1.png" />
									</div>
								</div>

							</div>
							<div class="picture">
								<img class="ani p3" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s" src='img/3.png' />

								<img class="ani p2" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s" src='img/2.png' />

								<img class="ani p1" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.8s" swiper-animate-delay="0.3s" src='img/1.png' />

							</div>
						</div>
					</div>
				</div>
				<div class="action">
					<a href="javascript:void(0);" id="join_btn">点击晒图</a>
					<div>（仅限６张萌宝照片，单张图片小于2M）</div>
				</div>

				<div class="uplaodImg">
					<div class="swiper-container swiper1">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div>
									<img src="img/p1.jpg" /></div>


							</div>
							<div class="swiper-slide">
								<div><span class="add_button">
                                <input type="file" /></span></div>
							</div>
							<div class="swiper-slide">
								<div><span class="add_button">
                                <input type="file" /></span></div>
							</div>
							<div class="swiper-slide">
								<div><span class="add_button">
                                <input type="file" /></span></div>
							</div>
							<div class="swiper-slide">
								<div><span class="add_button">
                                <input type="file" /></span></div>
							</div>
							<div class="swiper-slide">
								<div><span class="add_button">
                                <input type="file" /></span></div>
							</div>
						</div>

						<!-- Add Arrows -->

					</div>
					<div class="swiper-button-next iconfont icon-right"></div>
					<div class="swiper-button-prev iconfont icon-left"></div>

				</div>

				<div class="imgInfo">
					<textarea placeholder="一句话介绍照片（140字以内）"></textarea>
				</div>
				<div class="action">

					
					<a href="javascript:void(0);" class="disable" id="upload_btn">点击提交</a>
				</div>
				<div class="time">
					活动时间

					<br>
					<em>11月6日8:00-11月13日24:00</em>
				</div>
			</div>
		</div>
		<div class="cover-box share" id="share" style="display: none;">
			<img src="img/share.png" />
		</div>

		<div class="cover-box mid" id="qr" style="display: none;">
			<div class="gz_">
				<p>
					亲~感谢您上传照片参加本活动。微信现金红包将发到您的手机微信，敬请查收！1~100元随机金额，不成敬意！欢迎您11月14日下午2点莅临四海逸家活动现场，宝贝定制台历现场登记领取，同时抽取更多香港迪斯尼亲子游机会！

				</p>
				<p class="qr">
					<a href="">确认</a>
				</p>
			</div>
		</div>

		<div class="cover-box gz" id="gz" style="display: none;">
			<img src="img/gz.png" />
		</div>
		<div class="cover-box" id="gz_" style="display: none;">
			<div class="gz_">
				<h2>活动规则</h2>
				<p><em>活动时间：</em>2015年11月6日8:00—11月13日24:00</p>

				<p><em>领奖地点：</em>中国•成都•南三环一段 成龙路四海公园旁四海逸家售楼部</p>

				<p><em>咨询电话：</em>028-8031 1333</p>

				<p><em>参与方式：</em></p>

				<p>1、长按图片，识别图中二维码，关注“四海逸家”微信公众号。</p>
				<img src="img/c.jpg" style="" />
				<p>2、猛戳屏幕下方按钮【晒萌宝靓照】，上传自家萌宝靓照（最多6张照片），就送最高100元微信现金红包，由于系统原因红包到账时间会有延迟，部分用户由于自身并未开通微信红包功能或红包功能被腾讯屏蔽等原因，尚不能接收红包。</p>
				<p>3、分享朋友圈邀请好友点赞，集赞前10名，可领取香港迪士尼乐园家庭套票；集赞前100名，可获得自家萌宝专属台历。</p>
				<p>4、集赞前100名客户11月14日到现场参加抽奖活动，还有机会赢取神秘大奖。</p>
				<p>5、中奖后凭借本人微信号，到四海逸家售楼部领奖（中奖事宜请提前电话咨询）。</p>
				<p>6、本活动最终解释权归四海逸家所有。</p>

			</div>
		</div>

		<div class="audioControl play"></div>
		<div style="display: none;">
			<audio id="media" style="display:none;" src="img/media.mp3" loop controls></audio>
		</div>
		<span class="butter4"></span>
		<span class="butter5"></span>
		<span class="butter6"></span>
		<script>
			var swiper2 = new Swiper('.swiper2', {
				onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
			});
			$("body").queryLoader2({
				barColor: "#efefef",
				backgroundColor: "#111",
				percentage: true,
				barHeight: 1,
				minimumTime: 500,
				fadeOutTime: 1000,
				onComplete: function() {
					var swiper = new Swiper('.swiper1', {
						nextButton: '.swiper-button-next',
						prevButton: '.swiper-button-prev',
						slidesPerView: 1,
						paginationClickable: true,
						spaceBetween: 30,
						loop: true,
					});
					$("#r_button").bind("click", function() {
						$("#gz_").show();
					});
					$(".cover-box").bind("click", function() {
						$(this).hide();
					});
					$("#upload_btn").bind("click", function() {
						$("#share").show();
					});
					$("#share").bind("click", function() {
						$("#qr").show();
					});
					$("#join_btn").bind("click", function() {
						$("#gz").show();
					});
					
				}
			});
			$(function() {
				var audio = document.getElementById("media");
				audio.play();
				$(".audioControl").bind("click", function() {
					if ($(this).hasClass("play")) {
						$(this).removeClass("play");
						$(this).addClass("stop");
						audio.pause();
					} else {
						$(this).removeClass("stop");
						$(this).addClass("play");
						audio.play();
					}
				});
				$(".butter4").fly({
						runs: ["", "butter_run"],
						base: "butter4"
					});
				$(".butter5").fly({
						runs: ["", "butter_run"],
						base: "butter5",
						timer:150
					});
					$(".butter6").fly({
						runs: ["", "butter_run"],
						base: "butter6",
						timer:150
					});
						
			});
		</script>
	</body>

</html>